<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./Reactive.js"></script>
    <script>
      /**
       * 对于数组的响应式监听
       * 1 首先是把长度添加到响应式  当数组长度为1的时候 操作arr[2]='XXX'的时候会改变长度 应该触发副作用函数
       * 2 副作用函数访问的是数组的第n个索引的值 当数组把长度增加的时候不影响n索引的值所以不触发副作用函数  当长度减小到小于等于n的时候应该触发响应因为n索引的值被删除了
       */
      let obj = {
        bar: 1,
        arr: [1, 2, 3],
        deep: {
          a: 2,
        },
      };

      let data = reactive(obj);
      effect(() => {
        console.log("effect");
        for (const key of data.arr) {
        }
      });
      data.arr[1] = 5;
    </script>
  </body>
</html>
